import React, { Component } from 'react';

import { routerRedux, Route, Switch } from 'dva/router';


import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
  Button, Menu, Dropdown, Icon, Row, Col,
  Input, InputNumber,
  Steps, Card, Popover, Badge, Table, Tooltip, Divider,
  Checkbox, Modal, Radio,
  Select, message,
  Form,

} from 'antd';
import classNames from 'classnames';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './ApplyProfile.less';
import u620 from '../../assets/u620.png';
import u622 from '../../assets/u622.png';
import yes from '../../assets/yes.png';
import no from '../../assets/no.png';
import yellow from '../../assets/yellow.png';
import { getRoutes } from '../../utils/utils';

import querystring from 'querystring';

const { Step } = Steps;
const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const FormItem = Form.Item;

const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);

@connect(({ pendingTask, }) => ({
  pendingTask,
}))
@Form.create()
export default class ApplyDetails3 extends Component {
  state = {
    id: '',
    taskId: '',
    // operationkey: 'tab1',
    stepDirection: 'horizontal',
    modalVisible: false,
    creditVerify: {
      major: {
        reportno: '',
        overdue: '',
        status: '',
      },
      male: {
        reportno: '',
        overdue: '',
        status: '',
      },
      jointly: {
        reportno: '',
        overdue: '',
        status: '',
      },
      jointlyMale: {
        reportno: '',
        overdue: '',
        status: '',
      },
      note: '',
    },
    litigationQuery: {
      major: 0,
      male: 0,
      jointly: 0,
      other: '',
      otherName: '',
    },
    ficoQuery: {
      score: '',
      code: ['', '', '', ''],
    },
    custTaskListLoading: true,
    maleOverdue: '',
    profileState: null,
    dispatchTwo: false,
    ficoQueryCode0: '',
    ficoQueryCode1: '',
    ficoQueryCode2: '',
    ficoQueryCode3: '',
    note: '',
    ficoQueryScore: '',
    otherDesc: '',
    creditList: {}
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));

    // console.log("qqqqqAAAAAAAAparams.id")
    // console.log(params.custId)
    this.setState({
      id: params.custId,
      taskId: params.taskId,
      reviewState: params.reviewState,
    })
    if (params.reviewState == 3) {
      this.setState({
        dispatchTwo: true,
      })
    }
    if (params.custId != null) {
      dispatch({
        type: 'pendingTask/queryCredit',
        payload: {
          id: params.custId,
        },
        callback: () => {
          const { pendingTask: { creditList } } = this.props;
          this.setState({
            creditList: creditList
          })
          // console.log("creditList", creditList)
          if (creditList && creditList.creditVerify) {
            const creditVerify = JSON.parse(eval("(" + JSON.stringify(creditList.creditVerify) + ")"))

            const major = creditVerify.major
            const male = creditVerify.male
            const jointly = creditVerify.jointly
            const jointlyMale = creditVerify.jointlyMale
            this.setState({
              creditVerify: creditVerify,
              creditVerify: {
                ...this.state.creditVerify,
                major: {
                  ...this.state.creditVerify.major,
                  reportno: major.reportno,
                  overdue: major.overdue,
                  status: major.status,
                },
                male: {
                  ...this.state.creditVerify.male,
                  reportno: male.reportno,
                  overdue: male.overdue,
                  status: male.status,
                },
                jointly: {
                  ...this.state.creditVerify.jointly,
                  reportno: jointly.reportno,
                  overdue: jointly.overdue,
                  status: jointly.status,
                },
                jointlyMale: {
                  ...this.state.creditVerify.jointlyMale,
                  reportno: jointlyMale.reportno,
                  overdue: jointlyMale.overdue,
                  status: jointlyMale.status,
                },
                note: creditVerify.note,
              },

              otherDesc: creditList.otherDesc,
            })
            // console.log("this.state.creditVerify.major.overdue")
            // console.log(this.state.creditVerify.note)
          }

          if (creditList && creditList.litigationQuery) {
            const litigationQuery = JSON.parse(eval("(" + JSON.stringify(creditList.litigationQuery) + ")"))
            this.setState({
              litigationQuery: {
                ...this.state.litigationQuery,
                major: litigationQuery.major,
                male: litigationQuery.male,
                jointly: litigationQuery.jointly,
                other: litigationQuery.other,
                otherName: litigationQuery.otherName,
              },
            })
          }
          if (creditList && creditList.ficoQuery) {
            // console.log("creditList.ficoQuery")   
            // console.log(creditList.ficoQuery)        
            const ficoQuery = JSON.parse(eval("(" + JSON.stringify(creditList.ficoQuery) + ")"))
            const ficoQueryCode = ficoQuery.code
            this.setState({
              // creditVerify: creditVerify,
              ficoQueryCode0: ficoQueryCode[0],
              ficoQueryCode1: ficoQueryCode[1],
              ficoQueryCode2: ficoQueryCode[2],
              ficoQueryCode3: ficoQueryCode[3],
              ficoQuery: {
                ...this.state.ficoQuery,
                score: ficoQuery.score,
                code: ficoQuery.code,
              },
            })
          }
        }
      });
    }
    this.setStepDirection();
    window.addEventListener('resize', this.setStepDirection);
  }

  // componentWillUnmount() {
  //   window.removeEventListener('resize', this.setStepDirection);
  //   this.setStepDirection.cancel();
  // }

  @Bind()
  @Debounce(200)
  setStepDirection() {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }

  handleClickSubmit = () => {

    this.setState({
      custTaskListLoading: true
    })
    if (this.state.reviewState == 1) {
      this.props.dispatch({
        type: 'pendingTask/commitCredit',
        payload: {
          taskId: this.state.taskId,
          creditVerify: this.state.creditVerify,
          litigationQuery: this.state.litigationQuery,
          ficoQuery: this.state.ficoQuery,
          otherDesc: this.state.otherDesc,
        },
        callback: () => {

          const { pendingTask: { custTaskListLoading, auditStatusList } } = this.props;
          this.setState({
            custTaskListLoading: custTaskListLoading
          })
          const newAuditStatusList = [...auditStatusList];
          newAuditStatusList[2] = true;
          this.props.dispatch({
            type: 'pendingTask/changeApplyDetailsState1',
            payload: newAuditStatusList,
          })
        }
      })
    }
    if (this.state.reviewState == 2) {
      this.props.dispatch({
        type: 'pendingTask/commitCredit',
        payload: {
          taskId: this.state.taskId,
          creditVerify: this.state.creditVerify,
          litigationQuery: this.state.litigationQuery,
          ficoQuery: this.state.ficoQuery,
          otherDesc: this.state.otherDesc,
        },
        callback: () => {
          const { pendingTask: { custTaskListLoading, auditStatusList } } = this.props;
          this.setState({
            custTaskListLoading: custTaskListLoading
          })
          const newAuditStatusList = [...auditStatusList];
          newAuditStatusList[2] = true;
          this.props.dispatch({
            type: 'pendingTask/changeApplyDetailsState1',
            payload: newAuditStatusList,
          })
        }
      })
    }
  }

  handleMajorOverdue = (value) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        major: {
          ...this.state.creditVerify.major,
          overdue: value
        }
      }
    })
  }
  handleMajorReportno = (e) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        major: {
          ...this.state.creditVerify.major,
          reportno: e.target.value
        }
      }
    })
  }
  handleMajorStatus = (e) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        major: {
          ...this.state.creditVerify.major,
          status: e.target.value
        }
      }
    })
  }
  handleMaleReportno = (e) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        male: {
          ...this.state.creditVerify.male,
          reportno: e.target.value
        }
      }
    })
  }
  handleMaleOverdue = (value) => {

    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        male: {
          ...this.state.creditVerify.male,
          overdue: value
        }
      }
    })
  }
  handleMaleStatus = (e) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        male: {
          ...this.state.creditVerify.male,
          status: e.target.value
        }
      }
    })
  }
  handleJointlyOverdue = (value) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        jointly: {
          ...this.state.creditVerify.jointly,
          overdue: value
        }
      }
    })
  }
  handleJointlyReportno = (e) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        jointly: {
          ...this.state.creditVerify.jointly,
          reportno: e.target.value
        }
      }
    })
  }
  handleJointlyStatus = (e) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        jointly: {
          ...this.state.creditVerify.jointly,
          status: e.target.value
        }
      }
    })
  }
  handleJointlyMaleOverdue = (value) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        jointlyMale: {
          ...this.state.creditVerify.jointlyMale,
          overdue: value
        }
      }
    })
  }
  handleJointlyMaleReportno = (e) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        jointlyMale: {
          ...this.state.creditVerify.jointlyMale,
          reportno: e.target.value
        }
      }
    })
  }
  handleJointlyMaleStatus = (e) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        jointlyMale: {
          ...this.state.creditVerify.jointlyMale,
          status: e.target.value
        }
      }
    })
  }
  handleNote = (e) => {
    this.setState({
      creditVerify: {
        ...this.state.creditVerify,
        note: e.target.value
      }
    })
  }
  handleLitigationQueryMajor = (e) => {
    if (this.state.litigationQuery.major == 1) {
      this.setState({
        litigationQuery: {
          ...this.state.litigationQuery,
          major: 2
        }
      })
    } else {
      this.setState({
        litigationQuery: {
          ...this.state.litigationQuery,
          major: 1
        }
      })
    }
  }
  handleLitigationQueryMale = (e) => {
    if (this.state.litigationQuery.male == 1) {
      this.setState({
        litigationQuery: {
          ...this.state.litigationQuery,
          male: 2
        }
      })
    } else {
      this.setState({
        litigationQuery: {
          ...this.state.litigationQuery,
          male: 1
        }
      })
    }
  }
  handleLitigationQueryJointly = (e) => {
    if (this.state.litigationQuery.jointly == 1) {
      this.setState({
        litigationQuery: {
          ...this.state.litigationQuery,
          jointly: 2
        }
      })
    } else {
      this.setState({
        litigationQuery: {
          ...this.state.litigationQuery,
          jointly: 1
        }
      })
    }
  }
  handleLitigationQueryOther = (e) => {
    this.setState({
      litigationQuery: {
        ...this.state.litigationQuery,
        other: e.target.value
      }
    })
  }
  handleFicoQueryScore = (e) => {
    this.setState({
      ficoQuery: {
        ...this.state.ficoQuery,
        score: e.target.value
      }
    })
  }
  handleOtherDesc = (e) => {
    this.setState({
      otherDesc: e.target.value
    })
  }
  handleFicoQueryCode0 = (e) => {
    const codeList = this.state.ficoQuery.code;
    codeList[0] = e.target.value;
    this.setState({
      ficoQuery: {
        ...this.state.ficoQuery,
        code: codeList
      },
    })

  }
  handleFicoQueryCode1 = (e) => {
    const codeList = this.state.ficoQuery.code;
    codeList[1] = e.target.value;
    this.setState({
      ficoQuery: {
        ...this.state.ficoQuery,
        code: codeList
      },
    })
  }
  handleFicoQueryCode2 = (e) => {
    const codeList = this.state.ficoQuery.code;
    codeList[2] = e.target.value;
    this.setState({
      ficoQuery: {
        ...this.state.ficoQuery,
        code: codeList
      },
    })
  }
  handleFicoQueryCode3 = (e) => {
    const codeList = this.state.ficoQuery.code;
    codeList[3] = e.target.value;
    this.setState({
      ficoQuery: {
        ...this.state.ficoQuery,
        code: codeList
      },
    })
  }
  handleClickNotReport = () => {
    message.warning("暂无查询情况")
  }

  render() {
    const { stepDirection } = this.state;
    // const { pendingTask: { creditList } } = this.props;

    const { getFieldDecorator } = this.props.form;
    const yes1 = (<img alt="" src={yes} />);
    const no1 = (<img alt="" src={no} />);
    const yellow1 = (<img alt="" src={yellow} />);

    return (

      <div className={styles.tableListForm}>
        <Card
          title="申请人"
          bordered={false}
          style={{ marginBottom: 24 }}
        >

          <Form layout="inline">
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={8} sm={24}>
                <FormItem label="报告编号">
                  <Input disabled={this.state.dispatchTwo} value={this.state.creditVerify.major.reportno} onChange={this.handleMajorReportno} />

                </FormItem>
              </Col>
              <Col md={7} sm={24}>
                <FormItem label="12个月逾期数">
                  <InputNumber disabled={this.state.dispatchTwo} value={this.state.creditVerify.major.overdue} onChange={this.handleMajorOverdue} />

                </FormItem>
              </Col>
              <Col md={9} sm={24}>
                <FormItem>
                  <RadioGroup disabled={this.state.dispatchTwo} value={this.state.creditVerify.major.status} onChange={this.handleMajorStatus}>
                    <Radio value={"1"}>正常</Radio>
                    <Radio value={"2"}>关注</Radio>
                    <Radio value={"3"}>禁入</Radio>
                  </RadioGroup>
                  {this.state.creditVerify.major.status == "1" ? <img src={yes} /> : null}
                  {this.state.creditVerify.major.status == "2" ? <img src={yellow} /> : null}
                  {this.state.creditVerify.major.status == "3" ? <img src={no} /> : null}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Card>

        <Card
          title="申请人配偶"
          bordered={false}
          style={{ marginBottom: 24 }}
        >
          <Form layout="inline">
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={8} sm={24}>
                <FormItem label="报告编号">
                  <Input disabled={this.state.dispatchTwo} value={this.state.creditVerify.male.reportno} onChange={this.handleMaleReportno} />

                </FormItem>
              </Col>
              <Col md={7} sm={24}>
                <FormItem label="12个月逾期数">
                  <InputNumber disabled={this.state.dispatchTwo} value={this.state.creditVerify.male.overdue} onChange={this.handleMaleOverdue} />

                </FormItem>
              </Col>
              <Col md={9} sm={24}>
                <FormItem>
                  <RadioGroup disabled={this.state.dispatchTwo} value={this.state.creditVerify.male.status} onChange={this.handleMaleStatus}>
                    <Radio value={"1"}>正常</Radio>
                    <Radio value={"2"}>关注</Radio>
                    <Radio value={"3"}>禁入</Radio>
                  </RadioGroup>
                  {this.state.creditVerify.male.status == "1" ? <img src={yes} /> : null}
                  {this.state.creditVerify.male.status == "2" ? <img src={yellow} /> : null}
                  {this.state.creditVerify.male.status == "3" ? <img src={no} /> : null}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Card>

        <Card
          title="共同还款人"
          bordered={false}
          style={{ marginBottom: 24 }}
        >
          <Form layout="inline">
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={8} sm={24}>
                <FormItem label="报告编号">
                  <Input disabled={this.state.dispatchTwo} value={this.state.creditVerify.jointly.reportno} onChange={this.handleJointlyReportno} />

                </FormItem>
              </Col>
              <Col md={7} sm={24}>
                <FormItem label="12个月逾期数">
                  <InputNumber disabled={this.state.dispatchTwo} value={this.state.creditVerify.jointly.overdue} onChange={this.handleJointlyOverdue} />

                </FormItem>
              </Col>
              <Col md={9} sm={24}>
                <FormItem>
                  <RadioGroup disabled={this.state.dispatchTwo} value={this.state.creditVerify.jointly.status} onChange={this.handleJointlyStatus}>
                    <Radio value={"1"}>正常</Radio>
                    <Radio value={"2"}>关注</Radio>
                    <Radio value={"3"}>禁入</Radio>
                  </RadioGroup>
                  {this.state.creditVerify.jointly.status == "1" ? <img src={yes} /> : null}
                  {this.state.creditVerify.jointly.status == "2" ? <img src={yellow} /> : null}
                  {this.state.creditVerify.jointly.status == "3" ? <img src={no} /> : null}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Card>

        <Card
          title="共同还款人配偶"
          bordered={false}
          style={{ marginBottom: 24 }}
        >
          <Form layout="inline">
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={8} sm={24}>
                <FormItem label="报告编号">
                  <Input disabled={this.state.dispatchTwo} value={this.state.creditVerify.jointlyMale.reportno} onChange={this.handleJointlyMaleReportno} />

                </FormItem>
              </Col>
              <Col md={7} sm={24}>
                <FormItem label="12个月逾期数">
                  <InputNumber disabled={this.state.dispatchTwo} value={this.state.creditVerify.jointlyMale.overdue} onChange={this.handleJointlyMaleOverdue} />

                </FormItem>
              </Col>
              <Col md={9} sm={24}>
                <FormItem>
                  <RadioGroup disabled={this.state.dispatchTwo} value={this.state.creditVerify.jointlyMale.status} onChange={this.handleJointlyMaleStatus}>
                    <Radio value={"1"}>正常</Radio>
                    <Radio value={"2"}>关注</Radio>
                    <Radio value={"3"}>禁入</Radio>
                  </RadioGroup>
                  {this.state.creditVerify.jointlyMale.status == "1" ? <img src={yes} /> : null}
                  {this.state.creditVerify.jointlyMale.status == "2" ? <img src={yellow} /> : null}
                  {this.state.creditVerify.jointlyMale.status == "3" ? <img src={no} /> : null}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Card>

        <Card
          title="情况说明"
          bordered={false}
          style={{ marginBottom: 24 }}
        >
          <Row>
            <Col span={24}>
              <TextArea
                disabled={this.state.dispatchTwo}
                rows={4}
                
                placeholder="情况说明"
                style={{ marginBottom: 15 }}
                value={this.state.creditVerify.note}
                onChange={this.handleNote}
              />
            </Col>
          </Row>
        </Card>


        <Card
          title="法院被执行人查询"
          bordered={false}
          style={{ marginBottom: 24 }}>
          <Form layout="inline">
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={4} sm={24}>
                <FormItem >
                  <Checkbox
                    disabled={this.state.dispatchTwo}
                    checked={this.state.litigationQuery.major == 1 ? true : false}
                    onChange={this.handleLitigationQueryMajor}
                  >申请人</Checkbox>
                </FormItem>
              </Col>
              <Col md={6} sm={24}>
                <FormItem >
                  <Checkbox
                    disabled={this.state.dispatchTwo}
                    checked={this.state.litigationQuery.male == 1 ? true : false}
                    onChange={this.handleLitigationQueryMale}
                  >申请人配偶</Checkbox>
                </FormItem>
              </Col>
              <Col md={6} sm={24}>
                <FormItem  >
                  <Checkbox
                    disabled={this.state.dispatchTwo}
                    checked={this.state.litigationQuery.jointly == 1 ? true : false}
                    onChange={this.handleLitigationQueryJointly}
                  >共同还款人</Checkbox>
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
                <FormItem label="其他">
                  <Input disabled={this.state.dispatchTwo} value={this.state.litigationQuery.other} onChange={this.handleLitigationQueryOther} />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Card>


        <Card
          title="FICO系统查询情况"
          bordered={false}
          style={{ marginBottom: 24 }}>

          <Row>
            <Col span={4}>
              评分结果
            </Col>
            <Col span={20}>
              <Input disabled={this.state.dispatchTwo} style={{ width: 180 }} value={this.state.ficoQuery.score} onChange={this.handleFicoQueryScore} />
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col span={4}>
              扣分原因码
            </Col>
            <Col span={20} >
              <Row type="flex" justify="space-between">

                <Col span={5} >
                  <Input disabled={this.state.dispatchTwo} value={this.state.ficoQuery.code[0]} onChange={this.handleFicoQueryCode0} />
                </Col>

                <Col span={5} >
                  <Input disabled={this.state.dispatchTwo} value={this.state.ficoQuery.code[1]} onChange={this.handleFicoQueryCode1} />
                </Col>
                <Col span={5} >
                  <Input disabled={this.state.dispatchTwo} value={this.state.ficoQuery.code[2]} onChange={this.handleFicoQueryCode2} />
                </Col>
                <Col span={5} >
                  <Input disabled={this.state.dispatchTwo} value={this.state.ficoQuery.code[3]} onChange={this.handleFicoQueryCode3} />
                </Col>
              </Row>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col span={4}>
              云钱系统查询情况
            </Col>
            <Col span={20}>
              <Button type="primary" onClick={this.handleClickNotReport}>查看</Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 16 }}>
            <Col span={4}>
              其他系统查询情况
            </Col>
            <Col span={20}>

              <TextArea
                rows={4}
                disabled={this.state.dispatchTwo}
                placeholder="情况说明"
                style={{ marginBottom: 15 }}
                value={this.state.otherDesc}
                onChange={this.handleOtherDesc}
              />
            </Col>
          </Row>
          {
            this.state.reviewState == 3 ?
              null
              :
              <p style={{ textAlign: 'left', marginTop: 40 }}>
                <Button type="primary" onClick={this.handleClickSubmit}>提交</Button>
              </p>
          }
        </Card>
      </div>
    );
  }
}
